<template>
  <div class="p-10">
    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane label="个人信息" :name="1">
        <my-info />
      </el-tab-pane>
      <el-tab-pane label="修改密码" :name="2"> <my-password /></el-tab-pane>
      <el-tab-pane label="交易设置" :name="3"> <setting /></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ref } from "vue";
import MyInfo from "./components/myInfo.vue";
import MyPassword from "./components/mypassword.vue";
import Setting from "./components/setting.vue";

const tabIndex = ref(1);

const handleClick = (v) => {
  tabIndex.value = v;
};
</script>
<style lang="scss" scoped>
// ::v-deep(.el-tabs__item.is-active) {
//   color: #ffd04b !important;
// }
// ::v-deep(.el-tabs__active-bar) {
//   background-color: #ffd04b !important;
// }
// ::v-deep(.el-tabs__item) {
//   color: #fff !important;
// }
</style>
